<template>
    <div class="top">
        <span class="add" @click="anno">
             十 &nbsp;新增管理员
        </span>
    </div>


    <div class="bottom">
        <table cellpadding="0" cellspacing="0">
            <thead>
            <tr>
                <th>序号</th>
                <th>管理员ID</th>
                <th>头像</th>
                <th>账号</th>
                <th>用户名</th>
                <th>注册时间</th>
                <th>最近登录</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in fuzzyQueries" v-if="fuzzyQueries.length>0">
                <td style="width: 60px">{{ index + 1 }}</td>
                <td style="width: 120px" v-html="highlight_(item.uid)"></td>
                <td style="width: 60px" class="user_img">
                    <img :src="item.avatar" alt="">
                </td>
                <td style="width: 100px" class="overflow" v-html="highlight_(item.account)"></td>
                <td style="width: 100px" class="overflow" v-html="highlight_(item.username)"></td>
                <td style="width:180px ">{{dayjs(item.registrationTime).format('YYYY-MM-DD') }}</td>
                <td class="overflow"> {{ item.lastLogonTime }}</td>
                <td style="width: 150px">
                    <span class="edit" @click="edit_userInfo(item,index)">详情</span>
                    <span class="edit edit_del" @click="edit_del(item,index)">删除</span>
                </td>
            </tr>
            <tr v-else-if="fuzzyQueries.length===0 && load_" style="height: 50vh;background: transparent">
                <LoadTheAnimation ></LoadTheAnimation>
            </tr>
            <tr v-show="!load_">
                <td></td>
                <td></td>
                <td></td>
                <td><h2>未查询到任何数据</h2></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="bottom_">
        <span style="margin-right:10px">共{{ total.page }}页, 共{{ total.sum }}条数据 当前第{{ total.current }}页</span>
        <span class="jian" @click="left_">
    <img src="../../../public/static/jian_r.png" alt="">
    </span>
        <input type="text" class="limit" v-model="total.current" @focusout="limit_">
        <span class="jian" @click="right_">
    <img src="../../../public/static/jian_l.png" alt="">
    </span>
        <select @change ="page_($event)" class="page_index">
            <option  v-for="(item,index) in 3" >{{(index+1)*10}}/条</option>
        </select>
    </div>
    <PromptWindow v-show="box_confirm" @confirm="confirm" :info="info" :index="index"></PromptWindow>
    <AddAdministrator @shutDown="shutDown_" v-show="shutDown"></AddAdministrator>
</template>

<script>
import api from "@/api";
import dayjs from "dayjs";
import PromptWindow from "@/components/publicCommon/PromptWindow.vue";
import AddAdministrator from "@/components/administratorSettings/AddAdministratorSettings.vue";
import LoadTheAnimation from "@/components/publicCommon/LoadTheAnimation.vue";

export default {
    name: "AdministratorSettings",
    components: {LoadTheAnimation, AddAdministrator, PromptWindow},
    data() {
        return {
            select: false,
            searchValue: "",
            fuzzyQueries: [],
            fuzzyQueries_old:[],
            messagePage: {
                index: 1,
                condition: null,
                page:10,
            },
            messageDel: {
                index: "",
                condition: "",
            },
            total: {
                sum: '',
                page: '',
                size: '',
                current: 1,
            },
            info:"",
            box_confirm:false,
            index:"",
            del_info:false,
            shutDown:false,
            load_:true,
        }
    },
    mounted() {
        this.request_(this.messagePage);
    },
    watch: {
        'messagePage.page'(newValue,oldValue){
            this.messagePage.page = newValue;
            this.request_(this.messagePage);
        },
        del_info(newValue,oldValue){
            if(newValue){
                api.userDel(this.info.uid).then((res)=>{
                    if (res.data.code === 200) {
                        this.$store.commit("requestInfo", "删除成功!");
                        this.request_(this.messagePage);
                    } else {
                        this.$store.commit("requestInfo", res.data.msg);
                    }
                    this.info = "";
                    this.del_info = false;
                })
            }
        },
        'total.current'(newVal, oldVal) {
            let reg = /^\+?[1-9]\d*$/;
            if(reg.test(newVal)){
                this.messagePage.index = newVal;
            }
            if(newVal > this.total.page){
                this.messagePage.index = 1;
            }
        },
        searchValue(newValue, oldValue) {
            if (newValue === "") {
                this.messagePage.condition=null;
                this.request_(this.messagePage);
            }else {
                this.messagePage.condition=newValue;
            }

        },
    },
    methods: {
        page_(event){
            this.messagePage.page = parseInt(event.target.value);
        },
        anno(){
            this.shutDown = true;
        },
        shutDown_(){
            this.request_(this.messagePage);
            this.shutDown = false;
        },
        dayjs,
        highlight_(text) {
            text = text + "";
            if (this.searchValue !== "")
                return text.replace(this.searchValue, '<span style="background: #f6f604;">' + this.searchValue + '</span>')
            else return text
        },
        edit_userInfo(info){
            window.localStorage.setItem("edit_info",JSON.stringify(info));
            this.$router.push('/userInformationEditing')
        },
        edit_del(info,index){
            this.info = info;
            this.index = index;
            this.box_confirm = true;
        },
        search_() {
            this.messagePage.condition = this.searchValue
            this.request_(this.messagePage);
        },

        condition_(type) {
            this.messagePage.index = 1;
            this.messagePage.types = type;
            this.request_(this.messagePage);
        },
        confirm(index,bool){
            this.box_confirm = false;
            if(bool){
                this.del_info  = true;
                this.fuzzyQueries.splice(index, 1);
            }
        },
        limit_() {
            if(this.total.current === ""){
                this.total.current = 1;
            }
            this.request_(this.messagePage);
        },
        request_(messagePage) {
            api.getAdmin(messagePage).then((res) => {
                this.fuzzyQueries = res.data.data.content;
                this.fuzzyQueries_old = res.data.data.content;
                this.total.sum = res.data.data.statistics;
              if((res.data.data.statistics/14).toFixed(0) == 0){
                  this.total.page = 1;
              }else {
                  this.total.page = (res.data.data.statistics/14).toFixed(0)
              }
                if(this.fuzzyQueries.length===0){
                    setTimeout(()=>{
                        this.load_ = false;
                    },1000)
                }else {
                    this.load_ = true;
                }
            })
        },
        left_() {
            this.messagePage.index -= 1;
            if (this.messagePage.index < 1) {
                this.messagePage.index = 1;
                this.$store.commit("requestInfo", "已是第一页");
                return;
            }
            this.request_(this.messagePage);
        },
        right_() {
            this.messagePage.index += 1;
            if (this.messagePage.index > this.total.page) {
                this.messagePage.index = this.total.page;
                this.$store.commit("requestInfo", "已是最后一页");
                return;
            }
            this.request_(this.messagePage);
        }
    }
}
</script>

<style scoped>

.search_child{
    height: 30px;
    padding:0 10px;
    outline:none;
}
.choose{
    margin-left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.choose span{
    margin-right: 10px;
}
.search_click{
    display: inline-block;
    background: #057cf8;
    padding: 4px 7px;
    color: white;
    cursor: pointer;
}
.search_click:hover{
    opacity: .8;
}
.page_index{
    height: 26px;
    outline: none;
    padding: 0 7px;
    color: #4297ec;
    border: 1px solid #282828;
}
option{
    padding: 10px;
}

.user_img img {
    width: 40px;
    aspect-ratio: 1;
    border-radius: 50%;
    margin-right: 5px;
    margin-top: 3px;
    object-fit: cover;
}

td {
    max-width: 200px !important;
    height: 45px !important;
    animation: tr_ 0.3s ease-in-out 0s 1 forwards;
}
@keyframes tr_ {
    0%{
        transform: scaleY(0%);
    }100%{
         transform: scaleY(100%);
     }
}
.add {
    padding: 5px 6px;
    color: white;
    background: #3586f1;
    border-radius: 3px;
    font-size: 14px;
    cursor: pointer;
}

.add:hover {
    opacity: .9;
}
.edit_del{
    background: #ee4f4f;
}
</style>